<template>
    <el-row>
        <el-dialog title="个人中心" :visible.sync="tab.userdialog" width="30%" :before-close="handleClose">
            <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="用户信息">用户信息</el-tab-pane>
                <el-tab-pane label="修改密码">配置管理</el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

        <el-col :span="8">
            <el-card class="box-card" style="padding-right: 10px;">
                <div class="user">
                    <img src="../assets/images/avatar04.png" alt="">
                    <div class="userinfo">
                        <p class="name"></p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间：<span></span></p>
                    <p>上次登录地点：<span>湖南株洲</span></p>
                </div>
            </el-card>

            <el-card style="margin-top: 20px;height: 460px;">
            </el-card>
        </el-col>
        <el-col :span="16" style="padding-left: 10px;">
            <div class="num">
                <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
                    <div class="detail">
                        <p class="price">{{ item.value }}</p>
                        <p class="desc">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <el-card style="height: 280px;">
                <!-- 折线图 -->
                <div ref="echarts1" style="height: 280px;"></div>
            </el-card>
            <div class="graph">
                <el-card style="height: 260px;">
                    <div ref="echarts2" style="height: 260px;"></div>
                </el-card>
                <el-card style="height: 260px;">
                    <div ref="echarts3" style="height: 260px;"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex';
import Cookies from 'js-cookie'
import { getTopSalesRequest, getPayThisMonthRequest } from '@/api/order'

export default {
    name: 'Home',
    data() {
        return {
            count: 0,
            dialogVisible: false,
            labelPosition: 'top',
            tabPosition: 'left',
            countData: [
                {
                    name: '今日支付订单',
                    value: 0,
                    icon: "success",
                    color: '#2ec7c9'
                },
                {
                    name: '今日收藏订单',
                    value: 0,
                    icon: "star-on",
                    color: '#ffb980'
                },
                {
                    name: '今日未支付订单',
                    value: 0,
                    icon: "success",
                    color: '#2ec7c9'
                },
                {
                    name: '本月支付订单',
                    value: 0,
                    icon: "goods",
                    color: '#2ec7c9'
                },
                {
                    name: '本月收藏订单',
                    value: 0,
                    icon: "star-off",
                    color: '#ffb980'
                },
                {
                    name: '本月未支付订单',
                    value: 0,
                    icon: "error",
                    color: '#2ec7c9'
                }
            ],
            tableLabel: {
                name: '商品名称',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买'
            },
        };
    },
    methods: {
        cancel(){},
        submit(){},
        echartsInit() {
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$store.commit('CHANGE_USERDIALOG')
                })
                .catch(_ => { });
        },
        getTopSales() {
        },
        getPayThisMonth(status) {
        },
        successMsg(msg) {
            this.$message({
                type: 'success',
                message: msg
            });
        },
        errorMsg(msg) {
            this.$message({
                type: 'warning',
                message: msg
            });
        },
    },
    computed: {
        ...mapState(['tab']),

    },
    mounted() {
    },
}
</script>

<style lang="less" scoped>
.user {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;

    img {
        margin-right: 40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .userinfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.login-info {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

.num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .icon {
        width: 80px;
        height: 80px;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        color: #fff;
    }

    .detail {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .price {
            font-size: 30px;
            margin-bottom: 10px;
            line-height: 30px;
            height: 30px;
        }

        .desc {
            font-size: 14px;
            color: #999;
            text-align: center;
        }
    }

    .el-card {
        width: 32%;
        margin-bottom: 20px;
    }
}

.graph {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        width: 48%;
    }
}
</style>